<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-09-09 17:04:23
 * @LastEditors: dh
 * @LastEditTime: 2023-08-09 15:41:57
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>线性渐变配合阴影实现条纹立体阴影条纹字</title>
	</head>

	<body>
		<div data-name="Solid Shadow Word">Solid Shadow Word</div>
		<style>
			div {
				font-family:
					Times New Roman,
					'serif';
				position: relative;
				font-size: 30vmin;
				line-height: 40vmin;
				margin: 30vmin auto;
				text-align: center;
				text-shadow: 4px 4px 1px #333;
			}

			div::before {
				position: absolute;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-image: linear-gradient(
					-45deg,
					#fff 0%,
					#fff 25%,
					transparent 25%,
					transparent 50%,
					#fff 50%,
					#fff 75%,
					transparent 75%,
					transparent 100%
				);
				background-size: 6px 6px;
				z-index: 1;
			}

			div::after {
				position: absolute;
				content: attr(data-name);
				top: -4px;
				left: -2px;
				right: 6px;
				bottom: 6px;
				color: #333;
				z-index: 2;
				text-shadow: 3px 3px #fff;
			}
		</style>
	</body>
</html>
